<template>
  <div id="appendAddress">
    <c-title :hide="false" :text="$i18n.t('base.addNew') + $i18n.t('base.deliveryAddress')"></c-title>

    <div class="field-box">
      <van-field v-model="form.country_code" type="number" required :placeholder="$i18n.t('base.pleaseEnter') + $i18n.t('base.countryCode')" :label="$i18n.t('base.countryCode')"
        v-if="country_code" />
      <van-field v-model="form.username" :placeholder="$i18n.t('base.pleaseEnter') + $i18n.t('base.recipient')" :label="$i18n.t('base.recipient')" />
      <van-field v-model="form.mobile" :placeholder="$i18n.t('base.pleaseEnter') + $i18n.t('base.contactNumber')" type="tel" :label="$i18n.t('base.contactNumber')" />
      <div v-if="!region_hide">
        <van-field :label="$i18n.t('base.location')" is-link :value="addressName" :placeholder="$i18n.t('base.pleaseSelect') + $i18n.t('base.deliveryAddress')" @click.stop="addressShow = true"
          readonly />
        <van-field v-if="strShow" :label="$i18n.t('base.street')" is-link :value="form.street" :placeholder="$i18n.t('base.pleaseSelect') + $i18n.t('base.street')" @click.stop="streetChoose"
          readonly />
        <yd-cityselect v-model="addressShow" :callback="addressCallback" :items="district"></yd-cityselect>
      </div>
      <van-field v-model="form.address" rows="3" autosize type="textarea" :label="$i18n.t('base.addressDetails')" :placeholder="$i18n.t('base.pleaseEnter') + $i18n.t('base.addressDetails')" />
    </div>

    <div class="txt" v-if="address_parse_open">
      <p>自动填写地址</p>
      <textarea v-model="address" name="text" cols="30" rows="5" placeholder="示例:张三,1232123122,广东省XXXXX"
        class="textareaBox"></textarea>
        <div style="text-align: right;">
          <div class="filling" @click="filling">智能填充</div>
          <div style="clear: both;"></div>
        </div>
    </div>

    <div class="set">

      <van-field name="switch" :label="$i18n.t('base.settings') + $i18n.t('base.defaultAddress')" label-width="7.5rem" class="default-address">
        <template #input>
          <van-switch v-model="form.isDefault" size="18px" active-color="var(--themeBaseColor)" inactive-color="#D6D6DC" />
        </template>
      </van-field>

    </div>

    <div style="height: 3.75rem;"></div>


    <div class="address_addnav" @click="appendAddress">{{ $i18n.t('base.save') }}</div>

    <van-popup v-model="streetShow" position="bottom" :overlay="true">
      <van-picker title="选择街道" show-toolbar value-key="areaname" :columns="districtVal" @confirm="streetConfirm"
        @cancel="onCancel" />
    </van-popup>

  </div>
</template>
<script>
import appendAddress_v2_controller from './appendAddress_v2_controller';

export default appendAddress_v2_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-field__label {
  color: #00001C;
  font-size: .875rem;
  font-weight: 500;
}
::v-deep .yd-cityselect-nav-active,
::v-deep .yd-cityselect-item-active {
  color:var(--themeBaseColor) !important;
}
::v-deep .yd-cityselect-nav-active:after{
  background-color:var(--themeBaseColor) !important;
}
.field-box {
  margin: .625rem .75rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.set {
  margin: .625rem .75rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.txt {
  padding: .9063rem .75rem .75rem;
  background-color: #fff;
  border-radius: 0.5rem;
  margin: 0.625rem;
  text-align: left;

  .filling {
    float: right;
    width: 4.25rem;
    height: 1.75rem;
    border-radius: 1.2813rem 1.2813rem 1.2813rem 1.2813rem;
    border: 1px solid #F15353;
    color: #F15353;
    text-align: center;
    font-size: .75rem;
    line-height: 1.75rem;
  }

  p {
    font-weight: 500;
    font-size: 0.875rem;
    color: #00001C;
    line-height: 1;
  }

  textarea {
    border: none;
    margin-top: .6875rem;
    text-align: left;
    width: 100%;
    font-size: 0.875rem;
    color: #00001C
  }
}

.address_addnav {
  width: 21.9375rem;
  height: 2.5rem;
  margin: 0 auto;
  color: #fff;
  font-weight: 500;
  font-size: .9375rem;
  text-align: center;
  line-height: 2.5rem;
  background-color:var(--themeBaseColor);
  border-radius: 1.2813rem 1.2813rem 1.2813rem 1.2813rem;
}

.default-address {
  ::v-deep .van-field__body {
    float: right;
  }
}

::v-deep .van-cell--clickable:active {
  background-color: #fff;
}
</style>
